<template>
  <el-dialog v-model="visible"
             :title="dialogForm.id ? '编辑' : '新增'"
             type="border-card"
             header-class="border-b"
             body-class="px-0 pt-4"
             footer-class="border-t"
             fullscreen>
    <el-form :model="dialogForm" :rules="dialogFormRules" label-width="120px" style="width: 500px">
      <el-form-item label="表名称" prop="formName">
        <el-input v-model="dialogForm.formName" placeholder="请输入表名称"/>
      </el-form-item>
      <el-form-item label="表编码" prop="tableCode">
        <el-input v-model="dialogForm.tableCode" :disabled="!!dialogForm.id" placeholder="请输入表编码"/>
      </el-form-item>
      <el-form-item label="表描述" prop="describe">
        <el-input v-model="dialogForm.describe" type="textarea" placeholder="请输入表描述"/>
      </el-form-item>
      <el-space wrap>
        <el-form-item label="创建默认视图" prop="">
          <el-checkbox v-model="dialogForm.isDefaultView" true-value="Yes" false-value="No"/>
        </el-form-item>
        <el-form-item v-if="dialogForm.isDefaultView === 'Yes'" label="默认视图编码" prop="viewCode" style="width: 100%">
          <el-input v-model="dialogForm.viewCode" placeholder="请输入默认视图编码" style="width: 100%"/>
        </el-form-item>
      </el-space>
      <el-form-item label="数据表权限集">
        <el-select v-model="dialogForm.tableFieldDataAuthConfigCreation" clearable>
          <el-option label="创建者权限集" value="Creator"/>
        </el-select>
      </el-form-item>
    </el-form>
    <el-tabs model-value="表字段" type="border-card" class="h-full">
      <el-tab-pane label="表字段" name="表字段">
        <OnlineDataTableEditorTableField v-model="dialogForm.tableFieldList"/>
      </el-tab-pane>
      <el-tab-pane label="默认页面属性" name="默认页面属性">
        asd
      </el-tab-pane>
      <el-tab-pane label="表单校验字段" name="表单校验字段">
        asd
      </el-tab-pane>
      <el-tab-pane label="外键" name="索引">
        asd
      </el-tab-pane>
      <el-tab-pane label="查询配置" name="查询配置">
        asd
      </el-tab-pane>
      <el-tab-pane label="数据权限集" name="数据权限集">
        asd
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
  <!--  <workflow-editor-child-bpmn-intermediate-throw-event ref="bpmnIntermediateThrowEventDrawerRef"/>-->
</template>

<script setup>
/////////////////////////////////   外部依赖导入    //////////////////////////
import {onMounted, onUnmounted, ref, reactive, nextTick, onBeforeUnmount} from 'vue'
import {useRouter} from 'vue-router';
import {$localStorage} from "@/utils/application-storage.js";
import $apiService from "@/axios/api.js";

import OnlineDataTableEditorTableField from "./OnlineDataTableEditorTableField.vue";


/////////////////////////////////   私有变量定义    //////////////////////////
const $router = useRouter();
const visible = ref(false);
const tenantInfo = ref({
  id: "",
  tenantCode: '',
  systemName: ''
})
const myProfile = ref({
  realName: ''
})
const dialogForm = ref({
  isDefaultView: "No",
  tableFieldDataAuthConfigCreation: "",
  tableFieldList: [],
})
const dialogFormRules = ref({
  formName: [{required: true, message: '请输入表单名称', trigger: 'blur'}],
  tableCode: [{required: true, message: '请输入表单编码', trigger: 'blur'}],
  viewCode: [{required: true, message: '请输入默认视图编码', trigger: 'change'}],
  describe: [{required: true, message: '请输入表描述', trigger: 'change'}],
})

const bpmnStartEventDrawerRef = ref({
  show: () => {
  }
});
const bpmnSequenceFlowDrawerRef = ref({
  show: () => {
  }
});
const bpmnTaskDrawerRef = ref({
  show: () => {
  }
});
const bpmnEndEventDrawerRef = ref({
  show: () => {
  }
});
const bpmnIntermediateThrowEventDrawerRef = ref({
  show: () => {
  }
});

/////////////////////////////////   生命周期方法 //////////////////////////
onMounted(() => {
  tenantInfo.value = $localStorage.getTenantInfo()
  myProfile.value = $localStorage.getMyProfile()
});
onBeforeUnmount(() => {

})
onUnmounted(() => {
});
/////////////////////////////////   页面方法    //////////////////////////
const show = async (data) => {
  visible.value = true
  if (data) dialogForm.value = data
  await nextTick();
  // initBpmnModeler()
}
const doSave = () => {
}
const doPublish = () => {
}
const ddd = () => {
}
const eeee = () => {
}
/////////////////////////////////   暴露内部方法，让父组件可以访问    //////////////////////////
defineExpose({
  show
});
</script>

<style scoped>

:deep(.el-tabs__content) {
  padding: 0;
}
</style>
